<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>课程签到管理系统</title>
    <style>
        .layui-form-select dl {
            max-height: 150px;
        }
    </style>
</head>

<body class="layui-layout-body close-footer" style="overflow-y:scroll">
    <div class="layui-layout layui-layout-admin ">
        <div class="layui-header">
            <div class="layui-logo">课程签到管理系统</div>
            <!-- 头部区域（可配合layui已有的水平导航） -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="img/1.jpg" class="layui-nav-img" id="picture">
                        <!--用户名-->
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">基本信息</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="Login.html">退出</a></li>
            </ul>
        </div>

        <div class="layui-layout-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li class="layui-this">教授课程</li>
                        <li>学生管理</li>
                        <li>帮助</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div id="classmanage">
                                <table class="layui-hide" id="table1" lay-filter="table1"></table>
                                <script type="text/html" id="toolbar1">
                                    <div class="layui-btn-container">
                                        <button class="layui-btn layui-btn-sm" lay-event="getCourse">课程信息</button>
                                    </div>
                                </script>

                                <script type="text/html" id="bar1">
                                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                                </script>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <form class="layui-form" lay-filter="courseChoose2" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">课程</label>
                                    <div class="layui-input-block">
                                        <select name="coursename" lay-filter="coursename" id="coursename">
                                    </select>
                                    </div>
                                </div>
                            </form>
                            <div id="teachermanage">
                                <table class="layui-hide" id="table3" lay-filter="table3"></table>
                                <script type="text/html" id="toolbar3">
                                    <div class="layui-btn-container">
                                        <button class="layui-btn layui-btn-sm" lay-event="addStudent">添加学生</button>
                                        <button class="layui-btn layui-btn-sm" lay-event="addAllStudent">批量添加学生</button>
                                    </div>
                                </script>
                                <script type="text/html" id="bar3">
                                    <a class="layui-btn layui-btn-xs" lay-event="sign">签到</a>
                                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                    <a class="layui-btn layui-btn-xs" lay-event="email">发送邮件</a>
                                    <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->
                                </script>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-collapse" lay-filter="test">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
                                    <div class="layui-colla-content">
                                        <p>
                                            有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊
                                        </p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
                                    <div class="layui-colla-content">
                                        <p>
                                            因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo
                                        </p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
                                    <div class="layui-colla-content">
                                        <p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类 AMD 组织形式，并非是有意与时代背道而驰。layui 认为以 jQuery 为核心的开发方式还没有到完全消亡的时候，而早期市面上基于 jQuery 的 UI 都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
                                            <br><br> 因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。
                                        </p>
                                    </div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">贤心是男是女？</h2>
                                    <div class="layui-colla-content">
                                        <p>man！ 所以这个问题不要再出现了。。。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="display: none;" id="studentAdd">
        <form class="layui-form" lay-filter="studentAdd" style="padding: 5%" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">课程名</label>
                <div class="layui-input-block">
                    <input type="text" name="cname3" id="cname3" lay-verify="required" autocomplete="off" placeholder="请输入教授课时" class="layui-input" readonly=true>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学生</label>
                <div class="layui-input-block">
                    <select name="newstudent" lay-filter="newstudent" id="newstudent">
                </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" id="submit3" class="layui-btn" lay-submit lay-filter="submit3">提交</button>
                    <button type="reset" id="reset3" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script src="layui/layui.js"></script>
    <script src="layui/jquery-3.5.1.min.js"></script>
    <script>
        layui.use(['element', 'table', 'layer', 'form'], function() {
            var element = layui.element,
                table1 = layui.table,
                table2 = layui.table,
                table3 = layui.table,
                table4 = layui.table,
                table11 = layui.table,
                table22 = layui.table,
                table33 = layui.table,
                table44 = layui.table,
                form1 = layui.form,
                form2 = layui.form,
                form3 = layui.form,
                form4 = layui.form,
                form5 = layui.form,
                form6 = layui.form,
                form7 = layui.form,
                form8 = layui.form,
                form9 = layui.form,
                form10 = layui.form,
                form11 = layui.form;

            layer.msg('欢迎登录教师系统');

            ppuser = "";

            $.ajax({
                    url: 'http://localhost:8080/getUserId',
                    dataType: 'json',
                    type: 'post',
                    async: false,
                    success: function(data) {
                        ppuser = data.id;
                        $("#picture").after(data.username);
                    }
                })
                // console.log(ppuser);

            table1.render({
                elem: '#table1',
                url: 'http://localhost:8080/courselist',
                where: {
                    'ppuser': window.ppuser
                },
                defaultToolbar: ['filter', 'exports', 'print'],
                title: '课程数据表',
                cols: [
                    [{
                        field: 'courseId',
                        title: '课程ID',
                        fixed: 'left',
                        sort: true
                    }, {
                        field: 'courseName',
                        title: '课程名'
                    }, {
                        field: 'courseInfo',
                        title: '课程简介'
                    }, {
                        field: 'courseAddress',
                        title: '上课教室',
                    }]
                ],
                page: true
            });

            $.ajax({
                url: 'http://localhost:8080/coursefindname',
                dataType: 'json',
                type: 'get',
                data: {
                    'ppuser': window.ppuser
                },
                success: function(data) {
                    $.each(data.data, function(index, item) {
                        $('select#coursename').append(new Option(item.courseName, item.courseName)); // 下拉菜单里添加元素
                    });
                    //$("#TypeID").val("选中的值");
                    layui.form.render('select'); //重新渲染 固定写法
                }
            })


            table3.render({
                elem: '#table3',
                url: 'http://localhost:8080/studentlist',
                toolbar: '#toolbar3', //开启头部工具栏，并为其绑定左侧模板
                defaultToolbar: ['filter', 'exports', 'print'],
                title: '学生数据表',
                cols: [
                    [{
                        field: 'studentId',
                        title: '学号',
                        fixed: 'left',
                        sort: true
                    }, {
                        field: 'studentName',
                        title: '姓名'
                    }, {
                        field: 'studentClass',
                        title: '班级'
                    }, {
                        field: 'studentPhone',
                        title: '手机',
                    }, {
                        field: 'studentEmail',
                        title: '邮箱'
                    }, {
                        field: 'studentSign',
                        title: '签到情况'
                    }, {
                        fixed: 'right',
                        title: '操作',
                        width: 200,
                        toolbar: '#bar3'
                    }]
                ],
                page: true,
                id: 'table3'
            });

            form5.on('select(coursename)', function(data) {
                table3.reload('table3', {
                    where: {
                        'courseName': data.value
                    },
                    page: {
                        curr: 1
                    }
                });
            })

            table3.on('toolbar(table3)', function(obj) {
                var checkStatus = table3.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'addStudent':
                        $("input#cname3").attr("value", $("select#coursename").val());
                        $("select#newstudent").empty();
                        $.ajax({
                            url: 'http://localhost:8080/studentfindname',
                            dataType: 'json',
                            type: 'get',
                            data: {
                                'cname': $("select#coursename").val()
                            },
                            success: function(data) {
                                console.log(data);
                                $.each(data.data, function(index, item) {
                                    $('select#newstudent').append(new Option(item.name, item.name)); // 下拉菜单里添加元素
                                });
                                //$("#TypeID").val("选中的值");
                                layui.form.render('select'); //重新渲染 固定写法
                            }
                        })
                        layer.open({
                            content: $("#studentAdd"),
                            title: '添加学生',
                            type: 1
                        });
                        break;

                    case 'infoStudent':
                        layer.open({
                            content: $("#studentInfo"),
                            title: '学生信息',
                            type: 1,
                            area: '800px'
                        });
                        table11.reload('table11', {
                            where: {
                                'cname': $("select#coursename").val(),
                                'studentId': checkStatus.data[0].studentId
                            },
                            page: {
                                curr: 1
                            }
                        });
                        break;
                };
            });

            table3.on('tool(table3)', function(obj) {
                var data = obj.data;
                if (obj.event === 'sign') {
                    layer.confirm('确定签到？', function(index) {
                        $.ajax({
                            url: "http://localhost:8080/studentsign",
                            type: "POST",
                            data: {
                                "courseName": $("select#coursename").val(),
                                "studentId": data.studentId
                            },
                            dataType: "json",
                            success: function(res) {
                                if (res == 1) {
                                    layer.alert("签到成功！")
                                } else {
                                    layer.alert("学生重复签到！")
                                }
                                layer.close(index)
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    form7.val("studentEdit", {
                        "cname4": $("select#coursename").val(),
                        "sname": data.name,
                        "score": data.score
                    });
                    layer.open({
                        content: $("#studentEdit"),
                        type: 1,
                        title: '教师授课信息编辑'
                    });
                } else if (obj.event === 'email') {

                }
            });

            form6.on('submit(submit3)', function(data) {
                $.ajax({
                    url: "http://localhost:8080/studentadd",
                    method: "post",
                    data: {
                        "cname": data.field.cname3,
                        "sname": data.field.newstudent
                    },
                    dataType: "json",
                    success: function(res) {
                        if (res == 1) {
                            layer.open({
                                title: '添加成功',
                                content: '添加成功！！！',
                                end: function() {
                                    table2.reload('table2', {});
                                    table1.reload('table1', {});
                                    table3.reload('table3', {});
                                }
                            });
                        } else {
                            layer.open({
                                title: '添加失败',
                                content: '添加失败！',
                            });
                        }
                    }
                })
                return false;
            });
        })
    </script>

</body>

</html>